<template>
	<view id="identityPage">
		<view class="row">
			<text class="label">门店名称</text>
			<input type="text" v-model="shopName" />
		</view>
		<view class="row">
			<text>门店地址</text>
			<picker @change="bindPickerChange" mode="region" class="region-choose">
				<view class="zone">{{zone}}</view>
			</picker>
			<image class="nav-arrow" src="../../static/img/nav-arrow.png" mode="aspectFill"></image>
		</view>
		<view class="row">
			<text class="label">店主名字</text>
			<input type="text" v-model="masterName" />
		</view>
		<view class="row">
			<text class="label">联系电话</text>
			<input type="tel" v-model="tel" />
		</view>
		<view class="area">
			<view class="area-tit">
				营业执照
			</view>
			<view class="area-pic">
				<view class="pic" @click="choosePic">
					<image class="camara" :class="{'picFull': pic !=='../../static/img/camara.png'}" :src="pic" mode="aspectFill"></image>
				</view>
			</view>
		</view>
		<view class="area">
			<view class="area-tit">
				门店照片
			</view>
			<view class="area-pic">
				<view class="pic" @click="choocePhoto(0)">
					<image class="camara" :class="{'picFull': photos0 !=='../../static/img/camara.png'}" :src="photos0" mode="aspectFill"></image>
				</view>
				<view class="pic" @click="choocePhoto(1)">
					<image class="camara" :class="{'picFull': photos1 !=='../../static/img/camara.png'}" :src="photos1" mode="aspectFill"></image>
				</view>
				<view class="pic" @click="choocePhoto(2)">
					<image class="camara" :class="{'picFull': photos2 !=='../../static/img/camara.png'}" :src="photos2" mode="aspectFill"></image>
				</view>
				
				<!-- <view v-if="photos.length < 1" key="camare" class="pic" @click="choocePhoto">
					<image class="camara" src="../../static/img/camara.png" mode="aspectFill"></image>
				</view>
				<view v-else key="photo">
					<view class="pic" v-for="(item,index) in photos" :key="index">
						<image class="picFull" :src="item" mode="aspectFill"></image>
					</view>
				</view> -->
				
			</view>
		</view>
		<view class="foooter-next" @click="submit">
			提交认证
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				shopName: '',
				masterName: '',
				zone: '江苏省南京市玄武区',
				tel: '',
				pic: '../../static/img/camara.png',
				photos0: '../../static/img/camara.png',
				photos1: '../../static/img/camara.png',
				photos2: '../../static/img/camara.png',
			}
		},
		methods: {
			bindPickerChange: function(e) {
				console.log('picker发送选择改变，携带值为', e.target.value)
				this.zone = e.target.value.join('')
			},
			choosePic() {
				let that = this
				uni.chooseImage({
					count: 1,
					success: (e)=> {
						that.pic = e.tempFilePaths[0]
					}
				})
				
			},
			choocePhoto(n) {
				let that = this
				uni.chooseImage({
					count: 1,
					success: (e)=> {
						that[`photos${n}`] = e.tempFilePaths[0]
					}
				})
			},
			submit() {
				uni.navigateBack({
					delta: -1
				});
			}
		}
	}
</script>

<style>
#identityPage {
	padding-left: 34upx;
}
.row {
	height: 105upx;
	border-bottom: 1upx solid #eee;
	display: flex;
	align-items: center;
	font-size:28upx;
	font-weight:500;
	color: #666666;
	position: relative;
}
.label {
	margin-right: 78upx;
}
.nav-arrow {
	width: 16upx;
	height: 29upx;
	position: absolute;
	top: 44upx;
	right: 49upx;
}
.area {
	margin: 39upx 0 0 0;
}
.area-tit {
	font-size:28upx;
	font-weight:500;
	color:rgba(34,34,34,1)
}
.area-pic {
	height: 200upx;
	margin: 28upx 0 0 0;
}
.region-choose {
	width: 590upx;
	position: relative;
	z-index: 2;
}
.zone {
	margin-left: 65upx;
}
.pic {
	width: 200upx;
	height: 200upx;
	background:rgba(242,242,242,1);
	border-radius:8upx;
	display: flex;
	justify-content: center;
	align-items: center;
	float: left;
	margin-right: 20upx;
}
.camara {
	width: 82upx;
	height: 66upx;
}
.picFull {
	width: 100%;
	height: 100%;
}
</style>
